<template>
	<view>
		<scroll-view :style="{height:winheights}" @scroll="bindscroll" scroll-x="false" :scroll-y="overflow?true:false">
			<view id="topcont">
				<!-- 导航 -->
				<u-tabsb :list="navlist" :is-scroll="true" :current="current" @change="change"></u-tabsb>
				<!-- 轮播 -->
				<view style="padding: 40rpx;background-color: #82add5;">
					<swipers></swipers>
				</view>
				<view style="padding: 40rpx;background-color: #fff;">
					<playercom :src="src" v-if="src!=''"></playercom>
				</view>
				<!-- 选择日期（可以用uview代替） -->
				<view style="padding: 40rpx;background-color: #d5b397;">
					<datepick></datepick>
				</view>
				<!-- 选择日期，范围选择（可以用uview代替） -->
				<view style="padding: 40rpx;background-color: #d5b397;">
					<datepicks :sid="'1'"></datepicks>
				</view>
				<!-- 双向范围选择 -->
				<view style="padding: 40rpx;background-color: #fff;">
					<bsSlider></bsSlider>
				</view>		
				<view style="padding: 40rpx 0 0;background-color: #d5b397;"></view>
			</view>
			<!-- 拖拽(没api，先顶着用，列表拖拽可以) -->
			<view style="padding: 0rpx 26rpx 40rpx;background-color: #d5b397;">
				<dragsort @scrollviewhidden="scrollviewhidden" @scrollviewvisbile="scrollviewvisible" :topheights="topheight" :scrolltops="scrolltop"></dragsort>
			</view>
			<!-- 圆环 -->
			<view style="padding: 40rpx;background-color: #a6a6a6;">
				<u-circle-progress active-color="#2979ff" bg-color="transparent" border-width="5" :percent="40" :width="160">
				</u-circle-progress>
				<view style="float: right;">图表可以引入uchart这个组件</view>
			</view>
			<!-- 头像轮播 -->
			<view style="padding: 40rpx;background-color: #82add5;">
				<headslide></headslide>
			</view>
			<!-- 头像截取 -->
			<view style="padding: 40rpx;background-color: #b8aad5;">
				<avatar></avatar>
			</view>
			<!-- md5验证加分片上传测试（未成功测试） -->
			<view style="padding: 40rpx;background-color: #aaffff;">
				<md5spark-upload-with-group></md5spark-upload-with-group>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 安装node-sass
	//npm i node-sass -D
	
	// 安装sass-loader
	//npm i sass-loader -D
	
	// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
	// npm init -y
	
	// 安装
	//npm install uview-ui
	import swipers from './components/swipers.vue'
	import dragsort from './components/dragsort'
	import bsSlider from './components/bothside_slider'
	import headslide from './components/headslide'
	import datepick from './components/datepicker'
	import datepicks from './components/alldatepickers'
	import avatar from './components/avatar'
	import playercom from './components/video'
	import md5sparkUploadWithGroup from './components/md5spark_upload_with_group.vue'
	import uTabsb from './components/u-tabs.vue'
	export default {
		data() {
			return {
				name:'coms/coms',
				winheights:0,
				//导航
				navlist:[
					{
						name: '待收货'
					}, {
						name: '待付款'
					}, {
						name: '待评价',
						count: 5
					},{
						name: '待付款待付款'
					}, {
						name: '待评价',
						count: 5
					},{
						name: '待付款'
					}, {
						name: '待评价',
						count: 5
					},
				],
				current:0,
				//视频链接
				src:'http://vjs.zencdn.net/v/oceans.mp4',
				//拖拽部分的顶部高度
				topheight:0,
				//
				scrolltop:0,
				overflow:1,
			}
		},
		components:{
			swipers,
			dragsort,
			bsSlider,
			headslide,
			datepick,
			datepicks,
			avatar,
			playercom,
			md5sparkUploadWithGroup,
			uTabsb,
		},
		methods: {
			//导航
			change(index) {
				this.current = index;
			},
			//拖拽部分的顶部高度
			setbeforedragheight:function (){
				this.winheights = (uni.getSystemInfoSync().windowHeight) + 'px'
				if(this.name && this.name == 'coms/coms'){
					var query = uni.createSelectorQuery();
					query.select('#topcont').boundingClientRect();
					setTimeout(()=>{
						query.exec((res)=>{
							this.topheight = res[0].height + 44// #topcont节点的上边界坐标
						})				  						  
					})
				}
			},
			scrollviewhidden:function(){
				//拖拽相关的字段判断(新加的)
				this.overflow = 0
			},
			scrollviewvisible:function(){
				//拖拽相关的字段判断(新加的)
				this.overflow = 1
			},
			bindscroll:function(e){
				//拖拽相关的字段判断(新加的)
				this.scrolltop = e.detail.scrollTop
			},
		},
		onLoad(){
			this.setbeforedragheight()
		},
	}
</script>

<style scoped>
	
</style>
